---
title: Input Addon
description: A component for adding prefix or suffix content to input fields.
metaDescription: Input Addon component for React and Solid.js adding prefix or suffix content to text inputs. Enhance form fields with icons, text, or custom elements.
category: forms
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/input-addon.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Group, Input, InputAddon } from '@/components/ui'
```

```tsx
<Group>
  <InputAddon />
  <Input />
  <InputAddon />
</Group>
```

## Examples

### Sizes

Use the `size` prop to change the size of the input addon.

<ComponentExample name="sizes" />

### Variants

Use the `variant` prop to change the visual style of the input addon.

<ComponentExample name="variants" />

## Props

<PropsTable />
